<template>
  <div id="Sum" style="width: 100%;height:200px;"></div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    name: "CompSum",
    data() {
      return {
        list: [],
      }
    },
    methods: {
      getData() {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.post(_this.apiUrl("user/exam/getCompSum"), {}, {
          headers: {
            'token': token,
            'sid': _this.$route.query.sid
          }
        })
          .then((res) => {
            // console.log(res.data.data);
            let temp = res.data.data;
            for (let i = 0; i < temp.length; i++) {
              _this.list.push({value:temp[i]["count"], name:temp[i]["category"]});
            }
            echarts.init(document.getElementById('Sum')).setOption(_this.newEchartsSum());
          });
      },
      newEchartsSum() {
        let _this = this;
        // 指定图表的配置项和数据
        return {
          title: {
            text: _this.$route.query.sys_name
          },
          tooltip: {},
          series: [
            {
              name: '作答人数',
              type: 'pie',
              radius: '55%',
              roseType: 'angle',
              itemStyle: {
                // 阴影的大小
                shadowBlur: 200,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                // 高亮
                emphasis: {
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              data: _this.list
            }
          ]
        };
      }
    },
    mounted() {
      let _this = this;
      _this.getData();
    },
  }
</script>

<style scoped>

</style>
